<template>
  <section>
    <!-- 问卷卡片 -->
    <el-card>
      <div class="title">
        <span class="content">
          {{ dataMsg.name }}
        </span>
        <div class="des">
          <span>ID:{{ dataMsg.id }}</span>
          <span :class="dataMsg.status == 0 ? 'weifabu' : 'yifabu'"></span>
          <span>答卷人数:{{ dataMsg.posted }}/{{ dataMsg.recall }}</span>
          <span>时间:{{ myReplace() }}</span>
        </div>
      </div>
      <div class="questionnaire">
        <div class="left">
          <el-dropdown>
            <span class="el-dropdown-link">
              <i class="el-icon-data-line"></i> 统计&下载<i
                class="el-icon-arrow-down el-icon--right"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <span @click="statistics"> 不算弃票</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click="statisticsD">算弃票</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="right">
          <span @click="see"><i class="el-icon-view"></i> 查看二维码</span>
          <span @click="showPublish(dataMsg)"
            ><i class="el-icon-position"></i>生成</span
          >
          <span @click="updateQues(dataMsg.id)"
            ><i class="el-icon-edit"></i> 修改</span
          >
          <span @click="deleteQues(dataMsg.id)"
            ><i class="el-icon-delete"></i> 删除</span
          >
        </div>
      </div>
    </el-card>
    <!-- 修改问卷页面 -->
    <UpdateQuestionnaire
      ref="mychild"
      @isShowUpdateQuestionnaire="isShowUpdateQuestionnaire"
      :isShow="isShowQuestionnaire"
    />
  </section>
</template>
<script>
import UpdateQuestionnaire from "../Questionnaire/UpdateQuestionnaire.vue";
export default {
  name: "",
  components: {
    UpdateQuestionnaire
  },
  props: {
    dataMsg: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      //是否显示创建问卷
      isShowQuestionnaire: false
    };
  },
  created() {},
  computed: {},
  methods: {
    statisticsD() {
      this.$emit("statisticsD");
    },
    // 发送单击统计事件
    statistics() {
      this.$emit("statistics");
    },

    see() {
      this.$emit("seeQues");
    },
    // 匹配字符串
    myReplace() {
      return this.dataMsg.createTime.replace(/T/, "  ");
    },
    // 修改问卷功能
    updateQues(id) {
      this.isShowQuestionnaire = true;
      this.$refs.mychild.getUpdateQuestionnaire(id);
    },
    //
    // 删除问卷功能
    deleteQues(id) {
      console.log("删除问卷");
      // 向父组件发送一个事件
      this.$emit("deleteQues", id);
    },
    //显示发布弹出框
    showPublish(obj) {
      this.$emit("showPublish", obj);
    },
    //关闭创建问卷
    isShowUpdateQuestionnaire() {
      this.isShowQuestionnaire = false;
    }
  }
};
</script>
<style scoped>
.el-card {
  margin-top: 20px;
}
.el-card:hover {
  cursor: pointer;
  box-shadow: 0px 0px 10px 10px #eeeeee;
}
.title {
  /* float: left; */
  border-bottom: 1px solid #f3f3f3;
  overflow: hidden;
  padding-bottom: 10px;
}
.des {
  float: right;
}
.des span {
  padding-left: 10px;
  font-size: 14px;
}
.content {
  float: left;
  font-weight: 700;
  font-size: 19px;
}
.questionnaire {
  overflow: hidden;
  padding: 20px 0 5px 0;
  font-size: 13px;
  color: #7a7a7a;
}
.questionnaire span {
  padding-left: 10px;
}
.questionnaire span:first-child {
  padding-left: 0;
}
.left {
  float: left;
}
.right {
  float: right;
}

.right span:hover,
.left span:hover {
  color: #0095ff;
}

.yifabu::after {
  content: "◉ 已发布";
  color: #0095ff;
}
.weifabu::after {
  content: "◉ 未发布";
  color: #f34040;
}
</style>
